<extend name="Public:base" />
<block name="box-content">
<style type="text/css">
.col-sm-1{
    padding-left:2px;
    padding-right:2px;
}    
.box .box-title{
    margin-top: 5px;
    padding:2px 0 2px 3px;
}
.box .box-title h3{
    font-size: 16px;
    line-height: 18px;
}
</style>
<div class="box box-color box-bordered">
    <div class="box-title">
        <h3>
            <i class="icon-table"></i>
            {$tableTitle}
        </h3>
        <div class="actions">
        <a href="#" class="btn btn-updatepx" >保存排序</a>
        {:R('Admin/Widget/add',array($group,$thismod))}
        </div>
    </div>
    <div class="box-content menu-sortable-box menu-ui-sortable">
        <div class="row">
            <volist name="Menus" id="vo">
            <div class="col-sm-1 parentbox" >
                <div class="box box-color box-bordered blue ui-state-disabled" >
                    <div class="box-title">
                        <h3></h3>
                    </div>
                </div>
                <div class="box box-color box-bordered blue showbox" data-id="{$vo.id}">
                    <div class="box-title">
                        <h3>{$vo.name}</h3>
                    </div>
                </div>
                <volist name="vo[childs]" id="v">
                    <div class="box box-color box-bordered blue showbox" data-id="{$v.id}">
                        <div class="box-title">
                            <h3>{$v.name}</h3>
                        </div>
                    </div>
                </volist>
            </div>
            </volist>
            <for start="0" end="$span">
            <div class="col-sm-1 parentbox" >
                <div class="box box-color box-bordered blue ui-state-disabled" >
                    <div class="box-title">
                        <h3></h3>
                    </div>
                </div>
            </div>
            </for>
        </div>

        <table class="table table-bordered dataTable dataTable-scroll-x">
            <thead>
                <tr>
                <th>所属组</th>
                <th>模块</th>
                <th>名称</th>
                <th>网址</th>                    
                <th width="160" >#</th>
                </tr>
            </thead>
            <tbody>
                <volist name="volist" id="vo">
                <tr>
                    <td>{$vo.group}</td>
                    <td>{$vo.mod}</td>
                    <td>{$vo.name}</td>
                    <td>{$vo.url}</td>                    
                    <td>
                        {:R('Admin/Widget/bar',array($group,$thismod,$vo[id]))}
                    </td>
                </tr>
                </volist>
            </tbody>
        </table>
    </div>
</div>
<!-- jQuery UI -->
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.selectable.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.droppable.min.js"></script>
<script src="__PUBLIC__/js/plugins/jquery-ui/jquery.ui.draggable.min.js"></script>

<script type="text/javascript">
$(function(){
    $('.btn-updatepx').on('click',function(){
        $.gritter.add({
            title: '系统更新!',
            text: '更新中，请稍后.',
            sticky: false, 
            time: 5000,
            
        });
        var url = "{:U('Admin/Menu/sort')}";
        //parentbox
        $('.showbox').each(function(index,element){
            var item = $(this);
            var pid = $(this).parents('.parentbox').find('.showbox:eq(0)').data('id');
            var id = item.data('id');
            var idx = index;
            // var idx = $(this).parents('.parentbox').find(this);
            $.get(url,{pid:pid,id:id,idx:idx},function(){

            })
        })
    })

    
    
    $(".menu-sortable-box").sortable({
        connectWith: ".box",
        items: ".box",
        placeholder: "widget-placeholder",
        forcePlaceholderSize: !0,
        tolerance: "pointer",
        dropOnEmpty: !0,
        cancel: ".ui-state-disabled",
        update: function(event, ui) {
            var $parentbox = ui.item.parents('.parentbox');
            var pid = $parentbox.find('.box:eq(0)').data('id');
            var id = ui.item.data('id');
        }
    })
})    
</script>
</block>